{% block sw_media_quickinfo_usage %}
<div class="sw-media-quickinfo-usage">
    {% block sw_media_quickinfo_usage_loader %}
    <sw-loader
        v-if="isLoading"
        size="30px"
        class="sw-media-quickinfo-usage__loading-indicator"
    />
    {% endblock %}

    {% block sw_media_quickinfo_usage_empty_state %}
    <mt-banner
        v-else-if="isNotUsed"
        class="sw-media-quickinfo-usage__info-not-used"
        variant="info"
        :title="$tc('sw-media.sidebar.usage.titleMediaNotUsed')"
    >
        {{ $tc('sw-media.sidebar.usage.labelMediaNotUsed') }}
    </mt-banner>
    {% endblock %}

    {% block sw_media_quickinfo_usage_list %}
    <ul
        v-else
        class="sw-media-quickinfo-usage__list"
    >
        {% block sw_media_quickinfo_usage_item %}
        <router-link
            v-for="usage in getUsages"
            :key="usage.link.id"
            :to="{ name: usage.link.name, params: { id: usage.link.id } }"
            :target="routerLinkTarget"
        >
            <li
                v-tooltip="{
                    showDelay: 300,
                    hideDelay: 5,
                    message: usage.tooltip
                }"
                class="sw-media-quickinfo-usage__item"
            >
                {% block sw_media_quickinfo_usage_item_icon %}
                <div class="sw-media-quickinfo-usage__label">
                    <mt-icon
                        :name="usage.icon.name"
                        :color="usage.icon.color"
                        size="16px"
                    />
                </div>
                {% endblock %}

                {% block sw_media_quickinfo_usage_item_label %}
                <div class="sw-media-quickinfo-usage__label">
                    {{ usage.name }}
                </div>
                {% endblock %}
            </li>
        </router-link>
        {% endblock %}
    </ul>
    {% endblock %}
</div>
{% endblock %}

